<app-header-main 
  #header 
  [active]="page">
</app-header-main>
<div 
  class="demo-page"
  dLoading
  [showLoading]="deleteTaskLoading">
  <div class="tasklist-search-box-div">
    <div class="tasklist-search-box-block">
    </div>
    <div class="tasklist-search-box-block">
      <button id="open-graph-setting" style="float: right;" class="tool-bar-button" (click)="showDebugPanel(debug)">
        {{'toolBar.debug' | translate}}
      </button>
    </div>
  </div>

  <d-data-table [fixHeader]="true" tableHeight="360px" [containFixHeaderHeight]="true" [scrollable]="true"
    [headerBg]="true" [colDraggable]="true" [dataSource]="tableData.srcData.data"
    [tableWidthConfig]="mainTableWidthConfig">
    <thead dTableHead>
      <tr dTableRow>
        <th 
          dHeadCell 
          *ngFor="let colOption of dataTableOptions.columns">
          {{ colOption.header }}
        </th>
      </tr>
    </thead>
    <tbody dTableBody>
      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
        <tr dTableRow>
          <td dTableCell *ngFor="let colOption of dataTableOptions.columns">
            <div *ngIf="colOption.field !== 'job_operation'" class="edit-padding-fix">
              <span *ngIf="colOption.field == 'job_status'" class="edit-padding-fix">
                <d-badge *ngIf="rowItem['job_status'] === 'CREATEING'" [showDot]="true" status="warning"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'SUCCEEDED'" [showDot]="true" status="success"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'FAILED'" [showDot]="true" status="danger"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'PENDING'" [showDot]="true" status="waiting"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'UNKNOWN'" [showDot]="true" status="danger"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'RUNNING'" [showDot]="true" status="success"></d-badge>
                <d-badge *ngIf="rowItem['job_status'] === 'NOTEXIST'" [showDot]="true" status="danger"></d-badge>
                &nbsp;
                {{ rowItem['job_status_value'] }}
              </span>
              <span *ngIf="colOption.field !== 'job_status'">
                {{ rowItem[colOption.field] }}
              </span>
            </div>
            <div 
              *ngIf="colOption.field === 'job_operation'" 
              class="edit-padding-fix">
              <a 
                class="delete-button" 
                (click)="deleteData(rowItem)">
                {{'toolBar.deleteDialogButton' | translate}}
              </a>
            </div>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </d-data-table>
</div>
<ng-template #debug id="debug">
  <d-layout class="basic-usage">
    <d-tabs [type]="'tabs'" [(activeTab)]="tab1acticeID">
      <d-tab id="tab1" [title]="'toolBar.apiDebug' | translate">
        <ng-template dTabContent>
          <div style="height:580px">
            <div>
              <div 
                class="left-bar" 
                style="margin-bottom: 10px">
                <d-select 
                  class="template-select"
                  [placeholder]="'requestTemplate' | translate"
                  (valueChange)="templateChange($event)" 
                  [allowClear]="true" 
                  [(ngModel)]="selectTemplate"
                  [options]="optionsTemplate">
                </d-select>
              </div>
              <div 
                class="right-bar" 
                style="margin-bottom: 10px">
                <d-button 
                  bsStyle="common" 
                  class="button" 
                  (click)="handleClear()">
                  Clear
                </d-button>
              </div>
            </div>
            <div class="left-bar">
              <d-select 
                class="method-select" 
                [options]="options" 
                [(ngModel)]="selectMethod">
              </d-select>
              <input 
                class="url-input" 
                dTextInput 
                [(ngModel)]="url"
                id="textInput" />
            </div>
            <div class="right-bar">
              <d-button 
                bsStyle="common"
                class="button"
                (click)="handleSend()"
                *ngIf="!isSendingRequest">
                Send
              </d-button>
              <d-button 
                bsStyle="common" 
                class="button"
                [disabled]="true"
                *ngIf="isSendingRequest">
                Sending
              </d-button>
            </div>
            <fieldset class="title-fieldset">
              <legend class="inner">
                <span style="font-size: 14px;">Request</span>
              </legend>
            </fieldset>
            <div 
              class="flex-space-between" 
              style="width:100%;height:40px;">
              <div style="width:50%; display:inline-block">
                <div class="flex-space-between">
                  <d-radio-group 
                    style="display:inline-block" 
                    [name]="'optionContent'" 
                    [values]="values"
                    [(ngModel)]="choose" 
                    [direction]="'row'">
                  </d-radio-group>
                </div>
              </div>
              <div 
                class="flex-end" 
                style="width:50%;display:inline-block">
                <div
                  *ngIf="guide" 
                  (click)="openstandardDialog('standard')"
                  style="float:right"
                  class="font-bar">
                  Guide
                </div>
                <div 
                  *ngIf="choose === 'Body'" 
                  style="float:right;"
                  (click)="beautifyJson()"
                  class="font-bar">
                  Beautify
                </div>
              </div>
            </div>

            <d-splitter 
              style="height:400px" 
              class="splitter-border" 
              orientation="vertical" 
              [disabledBarSize]="'2px'">
              <d-splitter-pane size="180px">
                <ace 
                  *ngIf="choose === 'Body'" 
                  class="app-ace-editor" 
                  #editor 
                  style="height: 90%;" 
                  [config]="config"
                  [mode]="'dot'" 
                  [value]="jsonSrc" 
                  (valueChange)="handleChange($event)" 
                  [theme]="'tomorrow'">
                </ace>
                <div *ngIf="choose === 'Header'" style="height: 160px">
                  <d-data-table 
                    [dataSource]="dataHeaders" 
                    [scrollable]="true"
                    [tableWidthConfig]="tableWidthConfigKeyValue">
                    <thead dTableHead [checkable]="true">
                      <tr dTableRow>
                        <th 
                          dHeadCell 
                          style="text-align: center;">
                          Key
                        </th>
                        <th 
                          dHeadCell 
                          style="text-align: center;">
                          Value
                        </th>
                      </tr>
                    </thead>
                    <tbody dTableBody>
                      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                        <tr 
                          class="trheader" 
                          dTableRow 
                          [ngClass]="{ 'table-row-selected': rowItem.$checked }">
                          <td dTableCell class="devui-checkable-cell">
                            <d-checkbox 
                              [ngModelOptions]="{ standalone: true }"
                              (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                              [ngModel]="rowItem.ischecked">
                            </d-checkbox>
                          </td>
                          <td 
                            dTableCell 
                            [editable]="true" 
                            [editableTip]="editableTip" 
                            [(editing)]="rowItem['nameEdit']"
                            [rowItem]="rowItem" 
                            [field]="'key'" 
                            [beforeEditEnd]="beforeEditEnd"
                            style="text-align: center;">
                            <span *ngIf="!rowItem['nameEdit']">
                              {{ rowItem?.key }}
                            </span>
                            <div *ngIf="rowItem['nameEdit']" class="edit-padding-fix">
                              <input 
                                class="devui-form-control" 
                                name="key" 
                                [(ngModel)]="rowItem.key"
                                [attr.maxlength]="100" 
                                [attr.minlength]="3" />
                            </div>
                          </td>
                          <td 
                            dTableCell 
                            [editable]="true" 
                            [editableTip]="editableTip"
                            [(editing)]="rowItem['nameEdit2']" 
                            [rowItem]="rowItem" 
                            [field]="'value'"
                            [beforeEditEnd]="beforeEditEnd" 
                            style="text-align: center;">
                            <span *ngIf="!rowItem['nameEdit2']">
                              {{ rowItem?.value }}
                            </span>
                            <div *ngIf="rowItem['nameEdit2']" class="edit-padding-fix">
                              <input 
                                class="devui-form-control" 
                                name="value" 
                                [(ngModel)]="rowItem.value"
                                [attr.maxlength]="100" 
                                [attr.minlength]="3" />
                            </div>
                          </td>

                          <i 
                            class="icon icon-close" 
                            style="position:fixed; right:40px; cursor:pointer"
                            (click)="handleDelete(rowIndex)">
                          </i>
                        </tr>
                      </ng-template>
                    </tbody>
                  </d-data-table>
                </div>
              </d-splitter-pane>
              <d-splitter-pane size="180px">
                <fieldset class="title-fieldset">
                  <legend class="inner">
                    <span style="font-size: 14px;">Response</span>
                  </legend>
                </fieldset>
                <div 
                  class="flex-space-between" 
                  style="width:100%;height:28px;">
                  <div style="width:50%;display:inline-block">
                    <div class="flex-space-between" >
                      <d-radio-group 
                        style="display:inline-block" 
                        [name]="'optionContent'" 
                        [values]="values1"
                        [(ngModel)]="choose1" 
                        (ngModelChange)="radioValueChange($event)" 
                        [direction]="'row'">
                      </d-radio-group>
                    </div>
                  </div>
                  <div style="width:50%;display:inline-block">
                    <div *ngIf="showResponse" style="float:right">
                      Status: {{ statusCode }}
                    </div>
                  </div>
                </div>

                <ace 
                  class="app-ace-editor" 
                  *ngIf="showResponse" 
                  #editor 
                  style="height: 90%"
                  [config]="config" 
                  [value]="responseSrc" 
                  (valueChange)="handleChange1($event)" 
                  [theme]="'tomorrow'" 
                  [mode]="'dot'">
                </ace>
                <div 
                  *ngIf="!showResponse" 
                  class="flex-center"
                  style="height: 200px;">
                  <div>
                    <p style="text-align: center; font-size: 16px">
                      Send request failed
                    </p>
                    <p>
                      {{ postmanErrorMsg }}
                    </p>
                  </div>
                </div>
              </d-splitter-pane>
            </d-splitter>
          </div>
        </ng-template>
      </d-tab>
      <d-tab id="tab2" [title]="'toolBar.base64' | translate">
        <ng-template dTabContent>
          <div 
            style="height: 240px;"
            class="flex-space-between">
            <div 
              class="left-block">
              <div style="vertical-align: middle;margin-left:100px;">
                <div class="input-block">
                  <input type="file" (change)="handleFileSelect($event)" />
                </div>
                <div class="input-block">
                  <button 
                    class="input-button" 
                    (click)="selectText()">
                      {{'toolBar.copyWithOneKey' | translate}}
                  </button>
                </div>
              </div>
            </div>
            
            <div class="right-block">
              <textarea 
                dTextarea 
                placeholder="base64" 
                id="textArea" 
                #textArea
                style="height:100%;"
                [(ngModel)]="base64textString">
              </textarea>
            </div>

          </div>
        </ng-template>
      </d-tab>
    </d-tabs>
  </d-layout>
</ng-template>
<d-toast 
  [value]="msgs" 
  [style]="{ top: '100px' }">
</d-toast>
